<template>
  <div>
    <h1 ref="qwe">{{ count }}---{{ fiveCount }}</h1>
    <h2>{{ name }}---{{ age }}</h2>
    <button @click="addCount">+1</button>
    <button @click="modifyName">改名字</button>

    <hr>
    <button @click="toHome">点我去首页</button>
  </div>
</template>


<script lang="ts">
import { defineComponent, ref, reactive, toRefs, computed, watch, onMounted, onUpdated, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// 1000行代码
export default defineComponent({
  // 组合 api 
  setup() {
    // 获取路由
    // 跳转
    const router = useRouter()
    // 信息
    const route = useRoute()

    console.log(route);
    console.log(router)


    const qwe = ref<HTMLElement | null>(null)
    // 响应式数据
    const count = ref(1);
    const data = reactive({
      name: '张三',
      age: 18
    })

    // 计算属性
    const fiveCount = computed(() => {
      return count.value * 5
    })

    const toHome = () => {
      router.push('/')
    }

    // 侦听属性
    watch(count, (newValue, oldValue) => {
      console.log('count 改变后值为', newValue)
      console.log('count 的值该生改变了！！！')
      console.log('count 改变前值为', oldValue)
    })

    // 方法函数
    const addCount = () => {
      // 必须访问ref.value 才可以访问他的值
      count.value++
    }
    const modifyName = () => {
      data.name = '李四'
    }

    // 页面初次挂载完毕
    onMounted(() => {
      // if (qwe.value) {
      //   // console.log(qwe.value.classList.add);
      // }
    })

    // onUpdated(() => {
    //   console.log('数据更新了')
    // })


    // onUnmounted(() => {
    //   console.log('卸载了！！！')
    // })


    return {
      count,
      addCount,
      modifyName,
      ...toRefs(data),
      fiveCount,
      qwe,
      toHome
    }
  }
})
</script>